<template>
  <div>
    <div class="business-container">
      <div class="business-title">注意事项</div>
      <div>
        <div>美客多/亚马逊外箱标pdf自动分割 </div>
        <div>上传后系统AI自动处理pdf内容，处理完成后可浏览或点击下载pdf文件 </div>
        <div style="color: red;padding: 10px 0">注意：由于手动裁剪会导致pdf识别异常，建议上传美客多/亚马逊原PDF文件</div>
      </div>
    </div>


  </div>
</template>
<script lang="ts" setup>
import { Message } from "@arco-design/web-vue";

useHead({
  title: "注意事项"
})

const form = ref({
  file: '',
});

const result = ref({
  message: '',
  output:'',
  filename:"",
  success: false
});

function copyText() {
  const textarea = document.createElement('textarea');
  console.log(window.location.hostname)
  textarea.value = result.value.output;
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand('Copy');
  document.body.removeChild(textarea);

  Message.success("链接复制成功")
}

function openPdf() {
  console.log(result.value.output)
  window.open(result.value.output, "_block")
}
function downloadPdf() {
  let url = result.value.output
  let name = result.value.filename
  // 发送http请求，将文件链接转换成文件流
  let xhr = new XMLHttpRequest()
  xhr.open('get', url, true)
  // 请求类型
  xhr.responseType = 'blob'
  xhr.onreadystatechange = function() {
    // 获取接口结果
    if (xhr.readyState === 4 && xhr.status === 200) {
      window.URL = window.URL || window.webkitURL
      let a = document.createElement('a')
      let blob = new Blob([xhr.response])
      // 通过二进制文件创建url
      let url = window.URL.createObjectURL(blob)
      a.href = url
      a.download = name
      a.click()
      // 销毁创建的url
      window.URL.revokeObjectURL(url)
    }
  }
  xhr.send()

}

const customRequest = async (option: any) => {

  const {onProgress, onError, onSuccess, fileItem, name} = option
  const res: any = await yujiUpload("/amazon/upload", { method: 'POST',data:{ "file": fileItem.file} })

  if(res.code == 1) {
    result.value = {
      message: res.message,
      output: res.output,
      filename: res.filename,
      success: true
    }
    Message.success(res.message)
  }else{
    result.value = {
      message: res.message,
      output: "",
      filename: "",
      success: false
    }
    Message.error(res.message)

  }
};



</script>
<style lang="scss" scoped>

.business-container{
  margin: 60px auto;
  padding-bottom: 200px;
  position: relative;
  width: 1200px;
  .business-title{
    font-size: 48px;
    font-weight: 600;
    color: #000000;
    line-height: 56px;
    margin-bottom:30px;
    text-align: center;
  }
  .business-list{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: 50px auto;
    z-index:9;
    position: relative;
    .business-item{
      width: 285px;
      height: 278px;
      background: #EDF7FF;
      border-radius: 16px;
      margin: 6px;
      position: relative;
      overflow: hidden;
      &:hover .font {
        transform: translate(160%,160%);
        top: 0;
        left: 0
      }
      &:hover .back {
        transform: translate(0,0);
        top: 0%;
        left: 0;
        margin-left: -10px;
      }
      .font{
        transform: translate(0%,0%);
        transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -webkit-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        margin-left: -40px;
      }
      .back{
        transform: translate(-50%,-50%);
        transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -webkit-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        position: absolute;
        top: 0;
        left: -50%
      }
      p{
        font-size: 24px;
        font-weight: 600;
        color: #000000;
        line-height: 28px;
        padding: 10px 20px;
        position: absolute;
        bottom: 0;
        //width: 100%;
      }
    }
  }
  .pointer-one{
    position: absolute;
    right: 50px;
    top: 50px;
  }

  .pointer-two{
    position: absolute;
    bottom: 50px;
    left: 50px;
  }
}

</style>